<template>
  <div class="page box">
    <div class="weui-cells weui-cells_after-title">
      <div class="weui-cell ">
        <div class="weui-cell__hd">
          <div class="weui-label">收货人</div>
        </div>
        <div class="weui-cell__bd">
          <input class="weui-input" placeholder="请输入收货人姓名" v-model="userInfo.name"/>
        </div>
      </div>
      <div class="weui-cell ">
        <div class="weui-cell__hd">
          <div class="weui-label">联系电话</div>
        </div>
        <div class="weui-cell__bd">
          <input class="weui-input" placeholder="请输入收货人联系电话" type="tel" v-model="userInfo.tel"/>
        </div>
      </div>
      <div class="weui-cell ">
        <div class="weui-cell__hd">
          <div class="weui-label">所在地区</div>
        </div>
        <div class="weui-cell__bd">
          <picker mode="region"  @change="dateChange" :value="userInfo.region" :custom-item="customItem">
            <div class="picker">
              {{userInfo.region[0]}}-{{userInfo.region[1]}}-{{userInfo.region[2]}}
            </div>
          </picker>
        </div>
      </div>
      <div class="weui-cell ">
        <div class="weui-cell__hd">
          <div class="weui-label">详细地址</div>
        </div>
        <div class="weui-cell__bd">
          <input class="weui-input" placeholder="请输入收货人姓名" v-model="userInfo.address"/>
        </div>
      </div>
      <div class="weui-cells weui-cells_after-title">
        <div class="weui-cell weui-cell_switch">
          <div class="weui-cell__bd">设为默认</div>
          <div class="weui-cell__ft">
            <switch :checked="userInfo.isDefault" />
          </div>
        </div>
      </div>
    </div>
    <div class="btn">
      <button>确认</button>
    </div>
  </div>
</template>

<script>
  export default {
    name: "index",
    data(){
      return{
        userInfo:{
          name:'我的名字',tel:'1521234557',
          region: ['广东省', '广州市', '海珠区'],
          address: 'XX大街XX号',
          isDefault:false
        },
        customItem: '全部'
      }
    },
    methods: {
      dateChange: function (e) {
        console.log('picker发送选择改变，携带值为',  e.mp.detail.value)
        this.userInfo.region = e.mp.detail.value
      }
    },
  };
</script>

<style scoped lang="scss">
  @import "../../../../../static/css/basis";
  div {
    font-size: 14px;
  }
  .btn {
    margin-top: 60rpx;
    padding: 32rpx;
    button{
      background-color: $colorOrange;
      color: #fff;
    }
  }
</style>
